<template>
  <div class="test">
      <h1 >scoped作用:局部样式</h1>
      <Son></Son>

      <el-button type="primary" size="default">我是elementUI里面的按钮组件</el-button>
      
  </div>
</template>

<script>
import Son from './Son.vue'
export default {
  name: '',
  components:{
    Son
  }
}
</script>

<!-- scoped属性实现原理 
    当一个组件,它的样式加上了scoped属性,它的作用是给当前组件DOM结构加上相同自定义属性data-v-xxxx162
    (如果这个组件包含子组件)，给这个子组件的根节点加上相同的自定义属性data-v-xxxx162

    匹配样式的时候：用的是属性选择器
    h1[data-v-xxxx162] ->只能匹配父组件内部h1,子组件内部h1没有这个自定义属性！！！因此匹配不上！！！
 问题:我现在在父组件当中就是想修改子组件H1样式?怎么修改
 第一种方案：全局样式

//深度选择器:由于开发的时候，组件style一般都是加上scoped【样式局部】，如果想父组件修改子组件的样式！！！
//深度选选择器
>>>               CSS原生的深度选择器

/deep/           一般less样式会用这种写法

::v-deep         一般用于scss样式



深度选择器：修改人家UI组件的样式第三方

-->



<style scoped>

      .test{
       width:100%;
       height:600px;
       background: skyblue;
      }
      
      ::v-deep h1{
        color:red
      }
</style>



<style  scoped>
   >>>span{
     color:red;
   }

   >>>.el-button{
     background: yellow;
   }
</style>